<template>
    <h3>LifeCycle {{msg}}</h3>
</template>

<script>
import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
} from "vue"

export default {
    props: {
        msg: String
    },

    /* 组合式API入口 */
    setup(props, context) {
        console.log('LifeCycle setup', props, context);

        /* 生命周期回调 */
        /* 挂载之前你想做什么... */
        onBeforeMount(
            ()=>console.log("响应BeforeMount")
        )
        onMounted(
            ()=>console.log("响应Mounted")
        )
        onBeforeUpdate(
            ()=>console.log("响应BeforeUpdate")
        )
        onUpdated(
            ()=>console.log("响应Updated")
        )
        onBeforeUnmount(
            ()=>console.log("响应onBeforeUnmount")
        )
        onUnmounted(
            ()=>console.log("响应onUnmounted")
        ) 
    },


    /* Vue2的生命周期为8个选项 */
    // beforeCreate(){
    //     console.log("beforeCreate");
    // },
    // created() {
    //     console.log("created");
    // },

    // beforeMount() {
    //     console.log("beforeMount");
    // },
    // mounted() {
    //     console.log("mounted");
    // },

    // beforeUpdate() {
    //     console.log("beforeUpdate");
    // },
    // updated() {
    //     console.log("updated");
    // },

    // beforeUnmount() {
    //     console.log("beforeUnmount");
    // },
    // unmounted() {
    //     console.log("unmounted");
    // },

}
</script>